import React, { useState } from 'react';
import { Toast, Picker, Button, Form, Input, TextArea } from 'antd-mobile';
import * as api from './server';
import './css/public.css'
const basicColumns = [
    [
        { label: '分享', value: 'share' },
        { label: '客户端测试', value: 'dev' },
        { label: '问答', value: 'ask' },
        { label: '招聘', value: 'job' },
    ]
]
export const Public = () => {
    const [tabs, setTab] = useState(['未选择']);
    const createTopic = () => {
        let title = document.querySelector('input').value;
        let text = document.querySelector('textarea').value;
        let tab = tabs;
        let obj = {
            accesstoken: 'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
            title: title,
            tab: tab,
            content: text
        }
        if (title !== '' && tab !== '未选择' && text !== '' && title !== 'undefined' && text !== 'undefined') {
            if (title.length >= 10) {
                api.createTopic(obj)
                    .then(res => {
                        if (res.success) {
                            Toast.show({
                                icon: 'success',
                                content: '发布成功'
                            })
                        }
                    })
            } else {
                console.log(tabs)
                console.log(title)
                console.log(text)
                Toast.show({
                    icon: 'fail',
                    content: '发布标题未满足要求'
                })
            }
        } else {
            Toast.show({
                icon: 'fail',
                content: '发布内容不符合要求'
            })
        }


    }
    function RenderChildrenDemo() {
        const [visible, setVisible] = useState(false)
        return (
            <div align='left' >
                <Button
                    onClick={() => {
                        setVisible(true)
                    }}
                >
                    请选择版块：
                </Button>
                <Picker
                    columns={basicColumns}
                    visible={visible}
                    onClose={() => {
                        setVisible(false)
                    }}
                    value={tabs}
                    onConfirm={(e) => { setTab(e) }}
                >
                    {items => {
                        if (items.every(item => item === null)) {
                            return '未选择'
                        } else {
                            return items.map(item => item?.label ?? '未选择')
                        }
                    }}
                </Picker>
            </div>
        )
    }
    return (
        <div>
            <RenderChildrenDemo></RenderChildrenDemo>
            <Form style={{ width: '100%', margin: '5px 5px 5px 0', border: '1px solid' }}>
                <span style={{ width: '20%', height: '30px' }}>标题：
                    <input type='text' style={{ width: "80%", border: 'none' }} placeholder='标题字数10字以上'
                    // onChange={() => { setTitle(value) }}
                    />
                </span>
            </Form>
            <textarea id='text' cols="30" rows="10" style={{ width: "100%" }} placeholder='请输入正文'
            // onChange={(e) => { setText(e.value) }}
            >
            </textarea>
            <button onClick={createTopic}>发布</button>
        </div>
    )
}
